<template>
  <Drawer placement="right" :closable="true" v-model="visible" width="400" scrollable @on-close="cancel">
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img src="~@/assets/images/icon_workflow.png" class="w-6 h-6" alt="Start icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          {{desc}}
        </div>
      </div>
    </template>

    <!-- <div class="tabs">
      <div v-for="(item,index) in ['单次', '批处理']" :key="index" class="tab-row"
        :class="{active: form.type === index}" @click="form.type = index">{{ item }}
      </div>
    </div> -->
    <TypeTab
      v-model="form.issingle"
      :data="DEFAULT_LLM_TABS"
      active-color="#4d53e8"
      bg-color="#efefef"
      @on-change="handleTypeChange"
    />
    <Divider></Divider>

    <template v-if="form.issingle == 'batch'">
      <CommonCollapse title="批处理"
        tip="批处理模式下节点会多次运行，在每一次运行中，批处理列表将按照顺序将列表中的一项赋值给批处理变量，直到达到批处理上限或列表最大长度">
        <template #right>
          <Button type="primary" size="small" icon="md-add" @click="addInput('batchjsonlist')"></Button>
        </template>

        <div class="panel-table">
          <div class="panel-table-header">
            <div class="name" style="width: 150px">变量名</div>
            <div class="name">变量值</div>
          </div>
          <div class="panel-table-list">
            <Form ref="formEl" :model="form" label-position="top">
              <div class="flex items-center mb-4" v-for="(item, index) in form.batchjsonlist">
                <div class="panel-table-item" style="width: 160px">
                  <FormItem :key="index" :prop="'batchjsonlist.' + index + '.varname'" :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }">
                    <Input v-model="item.varname" placeholder="输入引用参考值" size="small" />
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 100px; margin-right: 0">
                  <FormItem>
                    <Select size="small" v-model="item.vartype">
                      <Option v-for="item in BE_TYPE_LIST" :value="item.value" :key="item.value">
                        {{ item.label }}</Option>
                    </Select>
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 180px">
                  <FormItem :prop="'batchjsonlist.' + index + '.varparam'" :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }">
                    <Input size="small" v-model="item.varparam" check-strictly placeholder="输入或引用参考值">
                    </Input>
                  </FormItem>
                </div>
                <div class="panel-table-item btn" @click="removeInput('batchjsonlist', index)">
                  <Icon type="md-remove" />
                </div>
              </div>
            </Form>
          </div>
        </div>
      </CommonCollapse>
      <Divider></Divider>
    </template>

    <CommonCollapse title="输入" tip="请输入API的参数，当此节点运行时，会将这些参数传入并调用这个API">
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 150px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form ref="formEl" :model="form" label-position="top">
            <div class="flex items-center mb-4" v-for="(item, index) in form.inoutlist">
              <div class="panel-table-item" style="width: 160px">
                <FormItem :key="index" :prop="'inoutlist.' + index + '.varname'" :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur',
                  }">
                  <Input v-model="item.varname" readonly placeholder="输入引用参考值" size="small" />
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 100px; margin-right: 0">
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option v-for="item in BE_TYPE_LIST" :value="item.value" :key="item.value">
                      {{ item.label }}</Option>
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem :prop="'inoutlist.' + index + '.varparam'" :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur',
                  }">
                  <Input size="small" v-model="item.varparam" check-strictly placeholder="输入或引用参考值">
                  </Input>
                </FormItem>
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="输出" tip="输出">
      <el-tree default-expand-all :data="form.outputjsonlist">
        <template #default="{ node, data }">
          <div class="panel-table">
            <div class="flex items-center">
              <span class="text-sm">{{data.varname}}</span>

              <div class="text-bg-normal">{{data.vartype}}</div>
            </div>
          </div>
        </template>
      </el-tree>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="异常忽略" tip="异常设置">
      <template #right>
        <Switch  v-model="form.isexepignore" />
      </template>

      <div class="flex items-center">
        忽略异常并在异常发生时使用默认输出替代
      </div>

      <div v-if="form.isexepignore" class="w-full h-52">
        <MonacoEditor v-model="form.defoutput" :editor-option="{ readOnly: true }" />
      </div>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { ref } from 'vue'
import CommonCollapse from '@/components/CommonCollapse/index.vue'
import MonacoEditor from '../../monaco-editor.vue'
import { BE_TYPE_LIST, VARTYPE_VALUES } from '../../lib/constant'

const DEFAULT_LLM_TABS = [
  {
    label: '单次',
    value: 'single',
  },
  {
    label: '批处理',
    value: 'batch',
  },
];
const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: '输出'
  },
  desc: String
})

const emit = defineEmits(['add', 'remove'])

const visible = ref(false)

// 组件的增删
const addInput = listKey => {
  emit('add', listKey)
}
const removeInput = (listKey, index) => {
  if (index == 0) return
  emit('remove', listKey, index)
}
const init = () => {
  visible.value = true;
  if (!props.form.defoutput) {
    handleTypeChange(props.form.issingle)
  }
}
const cancel = () => {
  visible.value = false
  emit('cancel')
}

function transValueToJSON(data) {
  const temp = {}
  data.forEach(item => {
    temp[item.varname] = item.varparam || VARTYPE_VALUES[item.vartype]
  })
  return temp
}

const handleTypeChange = (value) => {
  let code = JSON.stringify(transValueToJSON(props.form.outputjsonlist));
  if (value == 'batch') {
    code = `{
  "outputList": [
    ${code}
  ]
}`
  }
  props.form.defoutput = code
}

defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 4px;
  .tab-row {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    border-radius: 8px;
    cursor: pointer;
    color: #000;
    font-size: 12px;
    &:nth-child(n + 2) {
      margin-left: 4px;
    }
    &:hover {
      background-color: #ebebec;
    }
    &.active {
      background-color: #fff;
    }
  }
}

.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}

.el-tree-node__content {
  margin-top: 16px;
}
</style>
